<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
    	<link href="../css/chazhao.css" rel="stylesheet" />
    	<script src="../js/jquery-1.9.1.min.js"></script>
	</head>

	<body>
		<!--  顶部组件      -->
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">查找</h1>
		    <span class="gouwuche">
		    	<i class="iconfont icon-gouwuche"></i>
		    </span>
		</header>
		
		<!--  底部导航栏     -->
		<nav id="nav" class="mui-bar mui-bar-tab">
		    <a href="../index.html" class="mui-tab-item">
		        <span class="mui-icon iconfont icon-shouyeshouyeactive"></span><br>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a href="" class="mui-tab-item mui-active">
		        <span class="mui-icon iconfont icon-chazhao"></span><br>
		        <span class="mui-tab-label">查找</span>
		    </a>
		    <a href="chexing.html" class="mui-tab-item">
		        <span class="mui-icon iconfont icon-qiche"></span><br>
		        <span class="mui-tab-label">车型</span>
		    </a>
		    <a href="jituan.html" class="mui-tab-item">
		        <span class="mui-icon iconfont icon-xinwen-copy"></span><br>
		        <span class="mui-tab-label">集团资讯</span>
		    </a>
		    <a href="wode.html" class="mui-tab-item">
		        <span class="mui-icon iconfont icon-wo"></span><br>
		        <span class="mui-tab-label">我的</span>
		    </a>
		</nav>
		
		<!--  主题内容组件     -->
		<div class="mui-content">
		    <!-- 扫描、分类、品牌   -->
		    <div id="three">
		    	<ul id="three_ul">
		    	</ul>
		    </div>
			
			<!-- 热门分类模块   -->
			<div class="gongneng">
				<p class="title">热门分类</p>
				<ul id="gongneng_ul">
				</ul>
			</div>
		
			<!-- 品牌分类模块   -->
			<div class="pinpai">
				<p class="title">品牌分类</p>
				<ul id="pinpai_ul">
					<!--<a><li>
						<img src="../img/index/pin1.jpg">
					</li></a>
					<a><li>
						<img src="../img/index/pin2.jpg">
					</li></a>
					<a><li>
						<img src="../img/index/pin3.jpg">
					</li></a>
					<a><li class="rem_right">
						<img src="../img/index/pin4.jpg">
					</li></a>
					<a><li>
						<img src="../img/index/pin1.jpg">
					</li></a>
					<a><li>
						<img src="../img/index/pin3.jpg">
					</li></a>
					<a><li>
						<img src="../img/index/pin3.jpg">
					</li></a>
					<a><li class="rem_right">
						<img src="../img/index/pin4.jpg">
					</li></a>-->
				</ul>
			</div>
		</div>
		
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			nav_tab();
    	
	    	//底部导航栏点击跳转页面函数
	    	function nav_tab(){
	    		var nav = document.getElementById("nav");
		    	var nav_tab = nav.getElementsByClassName("mui-tab-item");
		    	for(var i=0;i<nav_tab.length;i++){
		    		(function(x){
		    			nav_tab[x].addEventListener('tap',function(){
					        window.location.href = this.href;
					    });
		    		})(i)
		    	}
	    	}
		</script>
		<script type="text/javascript">
			var programmer1=[{
				"s_word":"扫描",
				"s_class":"iconfont icon-saomianerweima"
			},{
				"s_word":"分类",
				"s_class":"iconfont icon-fenlei"
			},{
				"s_word":"品牌",
				"s_class":"iconfont icon-pinpai"
			}]
			var html1='';
			for(var i=0,len=programmer1.length;i<len;i++){
				html1 += '<li>\
					<i class="'+ programmer1[i].s_class +'">\
					</i>\
					<span> '+ programmer1[i].s_word +' </span>\
				</li>'
			};
			
			var programmer2=[{
				"g_src":"../img/index/gn1.jpg",
				"g_word":"汽机油"
			},{
				"g_src":"../img/index/gn2.jpg",
				"g_word":"机油格"
			},{
				"g_src":"../img/index/gn3.jpg",
				"g_word":"汽机油"
			},{
				"g_src":"../img/index/gn4.jpg",
				"g_word":"更多"
			},{
				"g_src":"../img/index/gn5.jpg",
				"g_word":"更多"
			},{
				"g_src":"../img/index/gn4.jpg",
				"g_word":"更多"
			}]
			var html2='';
			for(var i=0,len=programmer2.length;i<len;i++){
				html2 += '<li><a>\
					<img src="' + programmer2[i].g_src + '"></img>\
					<p>' + programmer2[i].g_word + '</p>\
				</a></li>'
			};
			var programmer3=[{
				"g_src":"../img/index/pin1.jpg"
			},{
				"g_src":"../img/index/pin2.jpg"
			},{
				"g_src":"../img/index/pin3.jpg"
			},{
				"g_src":"../img/index/pin4.jpg"
			},{
				"g_src":"../img/index/pin1.jpg"
			},{
				"g_src":"../img/index/pin2.jpg"
			},{
				"g_src":"../img/index/pin3.jpg"
			},{
				"g_src":"../img/index/pin4.jpg"
			}]
			var html3='';
			for(var i=0,len=programmer3.length;i<len;i++){
				html3 += '<li><a>\
					<img src="' + programmer3[i].g_src + '"></img>\
				</a></li>'
			};
			$('#three_ul').html(html1);
			$('#gongneng_ul').html(html2);
			$('#pinpai_ul').html(html3);
			$('#pinpai_ul li').eq(3).addClass("rem_right");
			$('#pinpai_ul li').eq(-1).addClass("rem_right");
		</script>
	</body>

</html>